<template>
	<view>
		<Header title="放心档案" :showBack="true"></Header>
		<view class="container">
			<view class="nav">
				<view class="item" :class="idx==6?'on':''" @click="changeNav(6)">质检报告</view>
				<view class="item" :class="idx==7?'on':''" @click="changeNav(7)">资质文件</view>
				<view class="item" :class="idx==5?'on':''" @click="changeNav(5)">出厂检验</view>
				<!-- <view class="item" :class="idx==8?'on':''" @click="changeNav(8)">日常巡检</view> -->
			</view>
			<!-- 出厂检验报告 -->
			<view class="quality-list">
				<view class="date-box" v-if="startTime&&endTime">
					<view class="date">
						<picker :disabled="flag" style="width: 100%;height: 100%;text-align: right;box-sizing: border-box;" mode="date" :start="start" @change="bindTimeChange($event,1)">
							<view class="uni-input">{{startTime}}</view>
						</picker>
						<image src="../../static/img/go.png" mode=""></image>
					</view>
					<view class="date-center">至</view>
					<view class="date">
						<picker :disabled="flag" style="width: 100%;height: 100%;text-align: right;box-sizing: border-box;" mode="date" :start="start" @change="bindTimeChange($event,2)">
							<view class="uni-input">{{endTime}}</view>
						</picker>
						<image src="../../static/img/go.png" mode=""></image>
					</view>
					
				</view>
				<view class="list" v-if="list.length>0">
					<block v-for="(item,index) in list" :key="index">
						<view class="item" @click="goContent(item.fileDate||'',item)" v-if="item.materialTypeFlag != 3">
							<view class="remark">{{item.fileDate?item.fileDate.split(' ')[0]:''}}{{item.remark||''}}</view>
							<view class="picture-box">
								<image :src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + item.pictureId" class="img" mode="aspectFill"></image>
								<view class="click-show">点击查看</view>
								<view class="num">{{item.listNum}}</view>
							</view>
						</view>
						<view class="item" @click="goContent(item.fileDate||'',item)" v-if="item.materialTypeFlag == 3">
							<view class="remark">{{item.fileDate?item.fileDate.split(' ')[0]:''}}{{item.remark||''}}</view>
							<view class="picture-box">
								<image src="/static/PDF.png" class="img" mode="widthFix"></image>
								<view class="click-show">点击查看</view>
								<view class="num">{{item.listNum}}</view>
							</view>
						</view>
					</block>
				</view>
				<view class="quesheng" v-else>
					<image class="empty" src="../../static/icon/icon_empty.jpg" mode=""></image>
					<view class="empty-txt">暂无数据</view>
				</view>
			</view>
			<!-- 质检报告 -->
			<!-- <view class="quality-list" v-if="idx==1"></view> -->
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				baseUrl:getApp().globalData.baseUrl,
				startTime: '',
				endTime: '',
				tenantId: uni.getStorageSync('info').tenantId,
				list: [],
				curPage: 1,
				limit: 15,
				isQingqiu: false,
				idx: 6,
			}
		},
		onLoad() {
			// this.setTime();
			this.getList(this.idx)
		},
		onReachBottom() {
			if (this.isQingqiu) {
				this.isQingqiu = false
				this.getList(this.idx)
			}
		},
		methods:{
			changeNav(idx){
				if(this.idx == idx) return;
				this.idx = idx;
				this.curPage = 1;
				this.limit = 15;
				if(idx==6||idx==7){
					this.startTime = '';
					this.endTime = ''
				}else{
					this.setTime()
				}
				this.getList(idx)
			},
			//预览
			preAll(url,fileType){
			    if(!fileType||!url){
			        console.log("网络延迟，请稍后尝试")
			        return
			    }
			    fileType = fileType.toLowerCase()
					if(['doc','docx','pdf','xls','xlsx','ppt','pptx'].includes(fileType)){
					    wx.showLoading({
					      title:'打开中',
					      icon:'none'
					    })
					    wx.downloadFile({
					        url: this.baseUrl + '/file/api/uploadFile/downloadByKey?id=' + url,
					        timeout:300000,
					        success(res) {
					            wx.hideLoading()
					            console.log(res, "--文件下载成功--")
					            if (res.statusCode == 200) {
					                let realPath = res.tempFilePath
					                if(['doc','docx','pdf','xls','xlsx','ppt','pptx'].includes(fileType)){
					                    wx.openDocument({
					                        filePath: realPath,
					                        fileType:fileType,
					                        success: function (res) {
					                            console.log('打开文档成功')
																			uni.closePreviewImage()
					                        },
					                        fail(error){
					                            console.log(error,"文档打开失败")
					                        }
					                    })
					                }else{
					                    wx.showToast({
					                        title:"文件格式不支持",
					                        icon:"none"
					                    })
					                }
					            }
					        },
					        fail(err){
					            wx.hideLoading()
					            wx.showToast({
					                title:"文件太大,请到pc端查看",
					                icon:"error"
					            })
					            console.log(err,"下载失败")
					        }
					    })
					}else{
			    // if(['png','jpg','jpeg','gif'].includes(fileType)){
			        wx.previewImage({
			            current: 0,
									urls: [this.baseUrl + '/file/api/uploadFile/downloadByKey?id=' + url],
			        })
			    }
					// else if(['mp4','m4v','3gp'].includes(fileType)){
			  //       wx.previewMedia({
			  //           sources:[{
			  //               url: this.baseUrl + '/file/api/uploadFile/downloadByKey?id=' + url,
			  //               type:'video'
			  //           }],
			  //           showmenu:true,
			  //           fail(err) {
			  //               console.log(err,"视频预览失败")
			  //           }
			  //       })
			  //   }
			},
			getList(idx){
				this.list = [];
				this.$http('/systemSetting/api/tenantPicture/list1',{
					condition:{
						startFileDate: this.startTime,
						endFileDate: this.endTime,
						tenantId: this.tenantId,
						typeFlag: idx
					},
					page: this.curPage,
					pageNum: this.curPage,
					pageSize: this.limit,
					rows: this.limit,
				},res=>{
					let arr = res.data.items;
					let resultObj = {};
					if (res.data.items.length > 0 && idx !=6) {
						// arr.push(...res.data.items)
						// this.list.push(...res.data.items)
						// this.list=arr.filter(item=>{item.fileDate})
						var hash = [];
						      for (var i = 0; i < arr.length; i++) {
						        for (var j = i + 1; j < arr.length; j++) {
						          if (arr[i].fileDate === arr[j].fileDate) {
						            ++i;
						            j = i;
						          }
						        }
						        arr[i].listNum = 0;
						        hash.push(arr[i]);
						      }
						      // 第二步，统计重复个数
						      hash.forEach(item => {
						        arr.forEach(dd => {
						          if (item.fileDate === dd.fileDate) {
						            item.listNum++
						          }
						        })
						      });
							this.list.push(...hash)
						if (res.data.items.length == this.limit) {
							this.curPage++
							this.isQingqiu = true
						}
					}else{
						res.data.items.forEach(item => {
						  item.listNum = 1;
						  this.list.push(item); 
						});
						// this.list.push(...res.data.items)
						if (res.data.items.length == this.limit) {
							this.curPage++
							this.isQingqiu = true
						}
					}
				})
			},
			
			goContent(time,item){
				if(item.typeFlag==6){
					// this.previewImage(item.pictureId)
					this.preAll(item.pictureId,item.materialTypeFlagName)
				}else{
					uni.navigateTo({
						url: '/pages/filesList/qualityDetial?time='+ time + '&idx=' + this.idx
					})
				}
			},
			bindTimeChange(e, x) {
				if (x == 1) {
					this.startTime = e.detail.value
				} else if (x == 2) {
					this.endTime = e.detail.value
				}
				this.curPage = 1
				this.list = []
				this.getList(this.idx)
			},
			setTime() {
				let date = new Date();
				this.endTime = date.toISOString().split('T')[0];
				date.setDate(1);
				this.startTime = date.toISOString().split('T')[0];
			},
		},
	}
</script>

<style scoped>
	view,image,text{box-sizing: border-box;}
	.nav{
		height: 88upx;
		width: 100%;
		/* background: #fff; */
		background: #fff4e6;
		display: flex;
		align-items: center;
		margin-bottom: 20upx;
		border-radius: 16upx;
		box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, 0.2);
	}
	.nav .item{
		width: 375upx;
		height: 88upx;
		text-align: center;
		line-height: 88upx;
		position: relative;
		font-size: 28upx;
	}
	.nav .item.on{
		color: #fff;
		background: #fe9120;
		border-radius: 16upx;
	}
	.nav .item.on .line{
		width: 100upx;
		height: 6upx;
		background: #fe9120;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -50upx;
	}
	.quality-list{
		width: 100%;
		padding: 30upx;
		background: #fff;
		border-radius: 16upx;
		/* box-shadow: 0 0 15upx rgba(247, 200, 122, .2); */
		box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, .2);
		padding-bottom: 220upx;
	}
	.quality-list .list{ display: flex; flex-wrap: wrap; justify-content: space-between; }
	.quality-list .list .item{ width: 284upx; margin-bottom: 54upx; }
	.quality-list .list .item .remark{ 
		width: 100%;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;			
		text-overflow: ellipsis;		
		display: -webkit-box;			
		-webkit-line-clamp: 2;			
		line-clamp: 2;					
		-webkit-box-orient: vertical;
		margin-bottom: 26upx;
		height: 86upx;
		font-size: 26upx;
	}
	.quality-list .list .item .picture-box{
		width: 284upx;
		height: 160upx;
		border-radius: 6upx;
		position: relative;
		overflow: hidden;
	}
	.quality-list .list .item .picture-box .img{
		width: 100%;
	}
	.quality-list .list .item .picture-box .click-show{
		width: 100%;
		height: 42upx;
		line-height: 42upx;
		border-radius: 0 6upx 6upx 0;
		position: absolute;
		bottom: 0;
		left: 0;
		text-align: center;
		color: #fff;
		background: rgba(0,0,0,.6);
		font-size: 24upx;
	}
	.quality-list .list .item .picture-box .num{
		color: #fff;
		background: rgba(0,0,0,.6);
		font-size: 24upx;
		position: absolute;
		right: 0;
		top: 0;
		padding: 6upx 10upx;
		border-top-right-radius: 6upx;
	}
	.date-box{
		display:flex;
		align-items: center;
		/* justify-content: center; */
		justify-content: space-between;
		font-size: 26upx;
		margin-bottom: 30upx;
	}
	.date-box .date{
		display: flex;
		align-items: center;
		background: #F7F7F7;
		/* border-radius: 40upx; */
		border-radius: 16upx;
		/* border: 1px solid #e2e2e2; */
		padding: 18upx 26upx;
	}
	.date-box .date image{
		width: 20upx;
		height: 20upx;
		transform: rotate(90deg);
		margin-left: 14upx
	}
	.date-box .date-center{
		margin: 0 12upx;
	}
	.quesheng{
		color: #b3b3b3;
		width: 100%;
		text-align: center;
		margin: 200upx auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.quesheng .empty{
		width: 180upx;
		height: 150upx;
		margin-bottom: 34upx;
	}
	.quesheng .empty-txt{
		font-size: 28upx;
		/* margin-bottom: 220upx; */
	}
	
	
</style>
